<template>
  <div class="app">
    <!-- 头部组件 -->
    <MovieHeader @tabClick="handleTabClick" :movieList="movieList" :tabIndex="tabIndex"></MovieHeader>
    <!-- 内容组件 -->
    <MovieContent :movieList="movieList" :tabIndex="tabIndex"></MovieContent>
  </div>
</template>

<script>
/**
 * vue提供了一个组件化的开发模式，帮助我们去提升开发效率和代码组织水平
 * 1. 把这种抽出去的组件，称为子组件
 * 2. 在哪儿引用的组件，称为父组件
 *
 * 抽离原则：（数据往下流，逻辑往上走） 动态绑定数据，传递给子组件，通过事件发布，将参数传递给父组件
 * 1. 将数据和逻辑留在父组件中，
 * 2. 子组件，接收数据，和处理后的结果，并且把需要的状态通过发布的模式（emit）发送给父组件，
 *
 * 抽离组件的好处：
 * 1. 代码变的更有层次感了，
 * 2. 可读性强
 * 3. 可维护性强
 *
 * 抽离需要注意的点是什么？
 * 1. 搞清楚，逻辑和数据的关系
 * 2. 父组件处理逻辑
 * 3. 子组件处理渲染
 */
import axios from 'axios'
// 1. 引入
import MovieHeader from '@/components/movie-header.vue'
import MovieContent from '@/components/movie-content.vue'
export default {
  // 2. 注册 3. 在模版中使用
  components: {
    MovieHeader,
    MovieContent,
  },
  data() {
    return {
      tabIndex: 0,
      movieList: [],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const tabData = await axios.get('/data.json')
      console.log(tabData.data, 'tabData')
      this.movieList = tabData.data
    },
    // tab切换逻辑，（逻辑放在父组件中，逻辑处理需要的参数，通过子组件传递过来就可以了）
    handleTabClick(index) {
      this.tabIndex = index
    },
  },
}
</script>

<style lang="scss">
.movie-header {
  display: flex;
  span {
    padding: 5px 10px;
    margin: 5px;
    background: lightcoral;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .active {
    background: red;
    color: gold;
  }
}
</style>
